<template>
  <div class="equipmentScrappingEdit">
    <h4>报废信息</h4>
    <table class="table" rules="all" border="1">
      <tr>
        <td><span class="red">*</span>申请时间</td>
        <td>
          <el-date-picker
            v-model="date"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </td>
        <td><span class="red">*</span>管理员</td>
        <td>
          <el-input v-model="sysUserName" :disabled="true"></el-input>
        </td>
      </tr>
      <tr>
        <td>备注</td>
        <td colspan="3">
          <el-input type="textarea" :rows="2" v-model="addForm.scrapInfo"></el-input>
        </td>
      </tr>
    </table>
    <h4>设备信息</h4>
    <el-button type="primary" icon="el-icon-plus" size="mini" @click="add">选择设备</el-button>
    <el-table :data="addData" v-loading="loading" border>
      <el-table-column align="center" type="index" label="序号" width="55"/>
      <el-table-column label="设备编号" prop="deviceCode"/>
      <el-table-column label="设备名称" prop="deviceName"/>
      <el-table-column label="购置日期" prop="buyDate"/>
      <el-table-column label="预计报废日期" prop="expectedRetireDate"/>
      <el-table-column label="采购价格" prop="buyMoney"/>
      <el-table-column label="当前净值" prop="currentValue"/>
      <el-table-column label="报废原因" width="120" prop="remarksReason">
        <template slot-scope="scope">
          <el-input type="textarea" :rows="2" v-model="scope.row.remarksReason"></el-input>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <h4>相关文件</h4>
    <div class="upload">
      <el-upload
        :show-file-list="false"
        :action="baseUrl()+'/common/upload'"
        :on-success="fileSuccess">
        <el-button size="mini" type="warning" icon="el-icon-folder-add">上传</el-button>
      </el-upload>
      <div class="unloadBox" v-if="addForm.deviceScrapEquipmentDocumentList.length>0">
        <div class="file" v-for="(item,index) in addForm.deviceScrapEquipmentDocumentList">
          <span class="index">{{index+1}}、</span>
          <span class="blue">{{item.fileName}}</span>
          <i class="blue el-icon-delete" @click="fileDel(index,item.filePath)"></i>
        </div>
      </div>
    </div>
 
    <!-- {{addForm.deviceScrapEquipmentDocumentList}} -->
    <div class="btn">
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="saveBtn(3)">保存</el-button>
      <el-button type="success"  icon="el-icon-plus" size="mini" @click="saveBtn(1)">提交</el-button>
    </div>
    <addDialog v-if="addShow" @selectChange="addSelect"></addDialog>
  </div>
</template>

<script>
  import {scrapAdd,deviceList,deviceDes,deviceEdit} from '@/api/scrap/index'
  import {fileDelete} from '@/api/basicInformation/index'
  import { getToken } from '@/utils/auth'
  import Cookies from 'js-cookie'
  import addDialog from "./addDialog";
    export default {
      name: "equipmentScrappingEdit.vue",
      components:{
        addDialog
      },
      data(){
        return{
          headers: { Authorization: 'Bearer ' + getToken() },
          date:'',
          sysUserName:Cookies.get('username'),
          id: null,
          addForm:{
            deviceScrapEquipmentDocumentList:[],
            deviceScrapDeviceDetailsNewVoList:[],
            scrapInfo: null,
            verifyStatus:3
          },
          list:[],
          addShow:false,
          loading:false,
          fileList:[],
          addData:[],
        }
      },
      created(){
        this.id = this.$route.query.id
        this.id&&deviceDes(this.id).then((res)=>{
          if(res.code==200){
            this.addForm = res.data
            this.addData = this.addForm.deviceScrapDeviceDetailsDtoList
          }
        })
      },
      methods:{
        add(){
          this.addShow = true
        },
        addSelect(data){
          if(data){
            this.addData=this.addData.concat(data)
            // this.addForm.deviceScrapDeviceDetailsNewVoList=data
          }
          this.addShow=false
        },
        saveBtn(verifyStatus) {
          if(this.addData.length<=0){
            this.$message.warning('未选设备！')
            return false
          }
          // if(this.addForm.deviceScrapEquipmentDocumentList.length<=0){
          //   this.$message.warning('未选相关文件！')
          //   return false
          // }
          this.addForm.deviceScrapDeviceDetailsNewVoList=[]
          this.addData.forEach((item,index)=>{
            this.addForm.deviceScrapDeviceDetailsNewVoList[index]={deviceId:item.id,remarksReason:item.remarksReason}
          })
          this.addForm.verifyStatus=verifyStatus
          if(this.id){
            //修改
            delete this.addForm.deviceScrapDeviceDetailsDtoList
            deviceEdit(this.addForm).then((res)=>{
              if(res.code==200){
                this.$message.success(res.msg)
                this.$router.push('/equipmentCZ/equipmentScrapping')
              }
            })
          }else{
            //添加
            scrapAdd(this.addForm).then((res)=>{
              if(res.code==200){
                this.$message.success(res.msg)
                this.$router.push('/equipmentCZ/equipmentScrapping')
              }
            })
          }
        },
        //删除
        handleDelete(info){
          this.$confirm('确定删除该数据吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.addData.splice(info.$index,1);
            // this.addForm.deviceScrapDeviceDetailsNewVoList.splice(info.$index,1);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        fileSuccess(res) {
          //文件上传成功
          this.addForm.deviceScrapEquipmentDocumentList.push({ fileName: res.fileName, filePath: res.filePath})
        },
        async fileDel(index, filePath){
          //删除文件
          await fileDelete(filePath)
          this.addForm.deviceScrapEquipmentDocumentList.splice(index, 1)
        }
      }
    }
</script>
<style lang="scss">
  .equipmentScrappingEdit {
    margin-left:20px;
    width:900px;
    .el-button{
      margin-bottom:20px;
    }
    h4 {
      color: #05A380;
    }
    .fileList{
      border: 1px solid #cccccc;
      min-height: 50px;
      width:100%;
    }
    .table {
      width:100%;
      border: 1px solid #cccccc;
      color: #606266;
      font-size: inherit;
      tr {
        td:nth-child(2n-1) {
          width: 20%;
          text-align: center;
        }
        td:nth-child(2n) {
          width: 30%;
          padding-left: 10px;
        }
        td {
          line-height: 35px;
          .red {
            color: red;
          }
          .el-input--medium .el-input__inner,.el-textarea .el-textarea__inner{
            border: none;
          }
        }
      }
    }
    .btn{
      text-align: center;
      margin-top:20px;
    }
    .upload {
      margin-top: 20px;
      width: 1000px;

      .unloadBox {
        border: 1px solid #cccccc;
        margin-top: 20px;
        min-height: 50px;
        overflow: hidden;

        .file {
          width: 100%;
          border-top: 1px #cccccc dotted;
          line-height: 50px;

          .index {
            padding: 0 10px;
            color: #666
          }

          i {
            float: right;
            line-height: 50px;
            padding-right: 10px;
            font-size: 20px;
            cursor: pointer;
          }

        }
      }
    }
  }
</style>

